<script lang="ts" setup>
import Episode from './Episode.vue'
import type { IChapter } from '@/typings/interface'

const { expand: _expand } = defineProps<{
  play?: boolean
  index: number
  expand: boolean
  chapter: IChapter
}>()

const expand = ref(_expand)
</script>

<template>
  <view class="mb-3.75">
    <view wfull bg="#D7D7D7 opacity-10">
      <view text="22 #333333" class="b b-#d7d7d7 b-opacity-35 px-2.5 py-1" between @click="expand = !expand">
        <text truncate>
          第 {{ index + 1 }} 章 - {{ chapter.title }}
        </text>
        <image
          class="w-20 h-12"
          src="@/static/images/icons/video/detail/arrow_up.svg"
          :style="{ transform: `rotate(${expand ? '0' : '180deg'})` }"
        />
      </view>
      <view v-show="expand" bg-white class="b-b b-l b-r b-#d7d7d7 b-opacity-35" p="y-2.2 x-6">
        <Episode
          v-for="(episode, idx) in chapter.episodeList"
          :key="episode.id"
          :play="play"
          :episode="episode"
          :chapter="chapter"
          class="last-mb-0 mb-2"
          :index="idx"
        />
      </view>
    </view>
  </view>
</template>
